<template>
  <div>
    <el-form
      :model="testInfo"
      label-width="100px"
      label-position="top"
      class="demo-ruleForm"
    >
      <div class="button-search">
        <el-row>
          <span>Headers</span>
        </el-row>
        <el-button
          slot="append"
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="addHeader()"
          >添加Header</el-button
        >
      </div>
      <!-- 动态增加项目 -->
      <!-- 不止一个项目，用div包裹起来 -->
      <div v-for="(item, index) in testInfo.headers" :key="index">
        <div class="div-inline">
          <el-form-item style="width: 100px">
            <el-input v-model="item.headerKey"></el-input>
          </el-form-item>
        </div>

        <span class="distance_style_10">=</span>

        <div class="div-inline distance_style_10">
          <el-form-item class="input_width_300">
            <el-input v-model="item.headerVal"></el-input>
          </el-form-item>
        </div>

        <div class="div-inline distance_style_10">
          <el-form-item>
            <el-link
              type="primary"
              :underline="false"
              @click.prevent="removeHeader(item, index)"
              >删除</el-link
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testInfo: {
        headers: [],
        headerKey: "",
        headerVal: "",
      },
    };
  },
  methods: {
    addHeader() {
      this.testInfo.headers.push({
        headerKey: "",
        headerVal: "",
      });
    },
    removeHeader(item, index) {
      this.testInfo.headers.splice(index, 1);
    },
  },
};
</script>

<style>
.div-inline {
  display: inline-block;
}

.button-search {
  display: flex;
  justify-content: space-between;
}
</style>
